<template>
  <div style="height: 20vh;background-color:#fff;padding:10px 20px;">
    <el-card style="height: 130px;">
      <el-form :inline="true" >
        <el-form-item label="车库名称:">
          <el-input placeholder="请输入车库名称" style="width:190px;"
                    v-model="searchcarportForm.name" @keydown.enter="loadCarport"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="searchcarportForm.status" placeholder="请选择车库状态" style="width: 190px">
            <el-option label="正常" value="1"></el-option>
            <el-option label="拥挤" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" >
        <el-form-item>
          <el-button @click="beforeAddVehicle" type="success">新建</el-button>
          <el-button type="danger" @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadCarport">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
  <!-- 弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="停车场名称">
            <el-select placeholder="请选择" v-model="saveCarportForm.parkingId">
              <el-option label="停车场A" value="1"></el-option>
              <el-option label="停车场B" value="2"></el-option>
              <el-option label="停车场C" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车库编号">
            <el-input placeholder="请输入内容" v-model="saveCarportForm.carportNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车库名称">
            <el-input placeholder="请输入内容" v-model="saveCarportForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveParking">确定</el-button>
    </template>
  </el-dialog>

  <!-- 车库列表 -->
  <el-card style="margin:20px;">
    <el-table :data="carportArr" >
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column prop="parkingname" label="停车场名称" align="center"/>
      <el-table-column prop="parkcode" label="停车场编号" align="center"/>
      <el-table-column prop="carportNum" label="车库编号" align="center"/>
      <el-table-column prop="name" label="车库名称" align="center"/>
      <el-table-column prop="parkingSpace" label="车位数" align="center"/>
      <el-table-column prop="status" label="状态" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"
                     @click="editCarpost(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteCarpost(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//控制新增车库弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增车库');

//保存车库搜索条件
const searchcarportForm = ref({name:'',status:''});
//保存车库表格数据
const carportArr = ref([]);
//加载车库的方法
const loadCarport = ()=>{
  let data = qs.stringify(searchcarportForm.value);
  axios.get(BASE_URL+'/carport/select?'+data).then((response)=>{
    if(response.data.code==2000){
      carportArr.value = response.data.data;
      carportArr.value.forEach((item)=>{
        item.status = item.status==1?'正常':'拥挤';
        item.parkingname = item.parkingId==1?'停车场A':item.parkingId==2?'停车场B':'停车场C';
      })
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//页面打开加载车辆方法
onMounted(()=>{
  loadCarport();
})
const resetSearch = ()=>{
  searchcarportForm.value = {};
  loadCarport();
}

const saveCarportForm = ref({
  parkingId:'',
  name:'',
  carportNum:''
})
//点击"新建车辆"按钮,调用此函数
const beforeAddVehicle = ()=>{
  //确保每次新增时的标题,且弹窗表单中没有数据
  dialogTitle.value = '新增车库';
  dialogVisible.value = true;
  saveCarportForm.value = {};
}

//定义保存的方法
const saveParking = ()=>{
  //把收集到的表单数据转为查询字符串格式
  let data = qs.stringify(saveCarportForm.value);
  //给后端发请求
  axios.post(BASE_URL+'/carport/save',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      saveCarportForm.value = {};
      loadCarport();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}

//编辑
const editCarpost = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑车库';
  axios.get(BASE_URL+'/carport/select?id='+id).then((response)=>{
    if(response.data.code===2000){
      carportArr.value.forEach(item=>{
        item.status = item.status==1?'正常':'拥挤';
        item.parkingId = item.parkingId==1?'停车场A':item.parkingId==2?'停车场B':'停车场C';
      })
      saveCarportForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//删除
const deleteCarpost = (id)=>{
  if(confirm('您确认要删除此车库吗?')){
    axios.post(BASE_URL+'/carport/delete/'+id).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success('删除成功!');
        loadCarport();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}
</script>